دوره آموزشی Html+Css|آشنایی با سلکتور های تو در تور در css ( سلکتور های فرزند و مستقیم )

لیست دروس

به صفحه تمرینات بروید

دوره آموزشی Html+Css

بازگشت به صفحه دوره

مقدمات برنامه نویسی

مقدمه دوره Html+Css

02:53

مهمترین نکاتی که قبل از شروع دوره باید بدانید؟

نصب نرم افزار ها و ابزارهای مورد نیاز

آشنایی با محیط نرم افزار VsCode

آشنایی با Html

آشنایی با Html و ساختار صفحات وب

13:15

آشنایی با تگ ها در Html ( بخش اول )

08:47

آشنایی با تگ ها در Html ( بخش دوم )

14:48

آشنایی با Attribute ها در Html

آشنایی با CSS

آشنایی با مقدمات و دستورات css

12:29

آشنایی با دستورات css ( بخش دوم )

آشنایی با استایل دهی به صورت اینترنال

آشنایی با سلکتورها در css ( کلاس)

آشنایی با سلکتورها در css ( آیدی)

آشنایی با فایرباگ در مرورگر فایرفاکس

11:22

تمرین (1) - مباحث گفته شده

آشنایی با تگ های Block & Inline

18:08

آشنایی با دستور display :flex در Css

شروع پروژه اصلی

شروع پروژه سایت فیلیمو

ساختاربندی سایت فیلیمو

ساختار بندی بخش Header در سایت فیلیمو

16:51

نحوه کار با آیکون ها در سایت

اتمام ساخت Header سایت فیلیمو

تمرین ساختار بندی هدر سایت

آشنایی با سلکتور های تو در تور در css ( سلکتور های فرزند و مستقیم )

20:13

تمرین مباحث سلکتور های فرزند و مستقیم

آشنایی با سلکتورهای عمومی ، and و or

آشنایی با سلکتور های خویشاوند ( adjacent,sibling selectors)

آشنایی با سلکتور های خصیصه ( Attribute Selectors )

آشنایی با شبه کلاس ها ( pseudo Class )

تمرین ( تمام سلکتورهایی که یاد گرفتیم)

اولویت استایل دهی در css

تمرین ( اولویت استایل دهی در css )

آشنایی با انواع نام گذاری کلاس ها ( camelCase & PascalCase)

آشنایی با روش BEM برای نام گذاری کلاس ها

آشنایی با پوزیشن ها در css ( پوزیشن fixed)

آشنایی با پوزیشن ها در css (پوزیشن sticky&relative)

آشنایی با پوزیشن ها در css (پوزیشن absolute)

10:01

استایل دهی به صورت اکسترنال در css

آشنایی با نحوه الحاق فونت به پروژه

آشنایی با fontawsome

نصب و تنظیمات اکستنشن prettier در vscode

بازنویسی کدهای پروژه بخش اول ( تغییر + کامنت نویسی استایل ها به روش اصولی )

بازنویسی کدهای پروژه بخش دوم( تغییر کلاس ها به روش BEM )

بازنویسی کدهای پروژه بخش سوم( تغییر آیکون ها)

بازنویسی کدهای پروژه بخش چهارم ( تغییر فونت پروژه)

ساخت اسلایدر پروژه + آشنایی با دستور overflow

آشنایی با دستور flex-direction و نحوه تغییر چیدمان آیتم ها

ایجاد آیتم های اسلایدر با استفاده از position و آشنایی با دستور gap

اتمام ساختار بندی اسلایدر پروژه فیلیمو

آشنایی با دستورات backgroundSize,image,repeat

آشنایی با دستور background-position

آشنایی با دستورات background-attachment & clip

آشنایی با دستور background-origin

آشنایی با دستور linergradient ( بخش اول - direction)

20:37

آشنایی با دستور linergradient ( بخش دوم- color-stop)

تمرین مباحث gradient

نحوه استفاده از دستور background

پشتیبانی مرورگر ها از دستورات css

اعمال دستور liner-gradient روی پروژه اصلی

آشنایی با دستور Transition

12:09

آشنایی با دستور transition-timing-functions

استفاده از دستور transition در پروژه

آشنایی با انواع لیست ها در Html

آشنایی با دستور border در css

پیاده سازی border در پروژه سایت فیلیمو

آشنایی با دستور opacity و ساختار بندی پروژه

ساختار بندی بخش فیلم / سریال پروژه فیلیمو

استفاده از چندین linear-gradient در یک دستور background

نحوه ساختار بندی صفحه جزئیات فیلم / سریال در پروژه

نحوه ساختار بندی صفحه جزئیات فیلم / سریال در پروژه (2)

آشنایی با دستورات white-space و text-overflow

نحوه ساختار بندی صفحه جزئیات فیلم / سریال در پروژه (3)

کار با دستورات filter و backdrop-filter و تفاوت آن ها

نحوه ساختار بندی صفحه جزئیات فیلم / سریال در پروژه (4)

استفاده از دستور backdrop-filter در پروژه

ساختار بندی بخش device و آشنایی با دستور line-height

استایل دهی بخش device پروژه فیلیمو

ساختار بندی بخش ویدیوهای آموزشی پروژه بخش 1

ساختار بندی بخش ویدیوهای آموزشی پروژه بخش 2

ساختار بندی بخش فیلم های رایگان پروژه

مروری بر دستورات z-index و linear-gradient در پروژه

مروری بر دستورات z-index و linear-gradient در پروژه بخش 2

ساختار بندی بخش سینما آنلاین پروژه بخش 1

ساختار بندی بخش سینما آنلاین پروژه بخش 2

ساختار بندی بخش سینما آنلاین پروژه بخش 3

آشنایی با دستورات overflow:auto و flex-wrap

ساختار بندی بخش نظرات کاربران بخش اول

ساختار بندی بخش نظرات کاربران بخش دوم

آشنایی با دستورات text-shadow و box-shadow در پروژه

آشنایی با شبه عناصر در سی اس اس

استفاده از شبه عناصر after&before در پروژه

ساختار بندی بخش سوالات متداول پروژه

آشنایی با دستور radial-gradient

کار کردن با دستور Radial-Gradient در پروژه

ساختار بندی نهایی بخش پایانی پروژه

پیاده سازی بخش footer سایت فیلیمو

آشنایی با دستور Transform

بخش پایانی گام اول - مباحث Html + Css

آشنایی مختصر با UI&UX

بخش دوم - مقدمات Ui&Ux ، شناخت مفاهیم و بررسی تفاوت آن ها

بررسی مهمترین گام های UI&UX ( گام اول - تحقیقات و آنالیز پروژه)

بررسی مهمترین گام های UI&UX ( گام دوم - اسکچ پروژه)

وایرفریم + پروتوتایپ در UI&UX

آشنایی با برترین سایت ها و ابزارهای UI&Ux

شروع پروژه Ui&Ux - تحقیق و ارزیابی یک وب سایت پزشکی

شروع پروژه Ui&Ux - اسکچ پروژه

نحوه نصب نرم افزار های فیگما + ادوبی ایکس دی

آشنایی با محیط نرم افزارهای ادوبی ایکس دی و فیگما

آشنایی با ابزارهای UI&Ux

بخش پایانی مباحث Ui&Ux

تمرین نهایی مباحث Ui&Ux

آشنایی با فتوشاپ ( مباحث مورد نیاز یک برنامه نویس)

دانلود ویدیو

دانلود فایل پیوست